<div th:fragment="header">

    <div class="header-top-right">
    <div class="file">
        <a href="upload.html">上传</a>
    </div>
    <div class="signin">
        <a href="#small-dialog2" class="play-icon popup-with-zoom-anim">注册</a>
        <!-- pop-up-box -->
        <script type="text/javascript" src="js/modernizr.custom.min.js"></script>
        <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
        <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
        <!--//pop-up-box -->
        <div id="small-dialog2" class="mfp-hide">
            <h3>注册账号</h3>
            <div class="social-sits">
                <div class="facebook-button">
                    <a href="#">与脸书连接</a>
                </div>
                <div class="chrome-button">
                    <a href="#">与谷歌连接</a>
                </div>
                <div class="button-bottom">
                    <p>已经有账户? <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
                </div>
            </div>
            <div class="signup">
                <form>
                    <input type="text" class="email" placeholder="Mobile Number" maxlength="10" pattern="[1-9]{1}\d{9}" title="Enter a valid mobile number" />
                </form>
                <div class="continue-button">
                    <a href="#small-dialog3" class="hvr-shutter-out-horizontal play-icon popup-with-zoom-anim">继续</a>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div id="small-dialog3" class="mfp-hide">
            <h3>注册账号</h3>
            <div class="social-sits">
                <div class="facebook-button">
                    <a href="#">与脸书连接</a>
                </div>
                <div class="chrome-button">
                    <a href="#">与谷歌连接</a>
                </div>
                <div class="button-bottom">
                    <p>已经有账号? <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
                </div>
            </div>
            <div class="signup">
                <form>
                    <input type="text" class="email" placeholder="邮箱" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?" title="输入有效电子邮件"/>
                    <input type="password" placeholder="密码" required="required" pattern=".{6,}" title="要求最小6个字符" autocomplete="off" />
                    <input type="text" class="email" placeholder="Mobile Number" maxlength="10" pattern="[1-9]{1}\d{9}" title="输入有效手机号码" />
                    <input type="submit"  value="注册"/>
                </form>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div id="small-dialog7" class="mfp-hide">
            <h3>注册账号</h3>
            <div class="social-sits">
                <div class="facebook-button">
                    <a href="#">与脸书连接</a>
                </div>
                <div class="chrome-button">
                    <a href="#">与谷歌连接</a>
                </div>
                <div class="button-bottom">
                    <p>A已经有账号? <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
                </div>
            </div>
            <div class="signup">
                <form action="upload.html">
                    <input type="text" class="email" placeholder="邮箱" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?" title="输入有效电子邮件"/>
                    <input type="password" placeholder="密码" required="required" pattern=".{6,}" title="要求最小6个字符" autocomplete="off" />
                    <input type="submit"  value="登录"/>
                </form>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div id="small-dialog4" class="mfp-hide">
            <h3>Feedback</h3>
            <div class="feedback-grids">
                <div class="feedback-grid">
                    <p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
                </div>
                <div class="button-bottom">
                    <p><a href="#small-dialog" class="play-icon popup-with-zoom-anim">Sign in</a> to get started.</p>
                </div>
            </div>
        </div>
        <div id="small-dialog5" class="mfp-hide">
            <h3>帮助</h3>
            <div class="help-grid">
                <p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
            </div>
            <div class="help-grids">
                <div class="help-button-bottom">
                    <p><a href="#small-dialog4" class="play-icon popup-with-zoom-anim">Feedback</a></p>
                </div>
                <div class="help-button-bottom">
                    <p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Lorem ipsum dolor sit amet</a></p>
                </div>
                <div class="help-button-bottom">
                    <p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Nunc vitae rutrum enim</a></p>
                </div>
                <div class="help-button-bottom">
                    <p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris at volutpat leo</a></p>
                </div>
                <div class="help-button-bottom">
                    <p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris vehicula rutrum velit</a></p>
                </div>
                <div class="help-button-bottom">
                    <p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Aliquam eget ante non orci fac</a></p>
                </div>
            </div>
        </div>
        <div id="small-dialog6" class="mfp-hide">
            <div class="video-information-text">
                <h4>Video information & settings</h4>
                <p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
                <ol>
                    <li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
                    <li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
                    <li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
                    <li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
                    <li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
                </ol>
            </div>
        </div>
       <!-- <script>
            $(document).ready(function() {
                $('.popup-with-zoom-anim').magnificPopup({
                    type: 'inline',
                    fixedContentPos: false,
                    fixedBgPos: true,
                    overflowY: 'auto',
                    closeBtnInside: true,
                    preloader: false,
                    midClick: true,
                    removalDelay: 300,
                    mainClass: 'my-mfp-zoom-in'
                });

            });
        </script>-->
    </div>
    <div class="signin">
        <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a>
        <div id="small-dialog" class="mfp-hide">
            <h3>登录</h3>
            <div class="social-sits">
                <div class="facebook-button">
                    <a href="#">Connect with Facebook</a>
                </div>
                <div class="chrome-button">
                    <a href="#">Connect with Google</a>
                </div>
                <div class="button-bottom">
                    <p>注册账号? <a href="#small-dialog2" class="play-icon popup-with-zoom-anim">注册</a></p>
                </div>
            </div>
            <div class="signup">
                <form>
                    <input type="text" class="email" placeholder="输入邮箱 / 手机号" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"/>
                    <input type="password" placeholder="密码" required="required" pattern=".{6,}" title="最小6位" autocomplete="off" />
                    <input type="submit"  value="LOGIN"/>
                </form>
                <div class="forgot">
                    <a href="#">忘记密码?</a>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <div class="clearfix"> </div>
</div>
</div>